<template>
  <article class="TPL_variable-list-container">

  <el-form
    ref="variableListForm"
    :model="formData"
  >
    <el-table
      v-show="formData.variableList.length"
      :data="formData.variableList"
      border
      style="width: 100%"
      class="form-item-content variable_tabel"
    >

      <!-- 变量-变量ID -->
      <el-table-column
        label="id"
        class="table-item variable-item-id variable-id"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="`variableList.${scope.$index}.id`"
            :rules="variableRules.id"
          >
            <el-input v-model.number="scope.row.id" class="table-item-content variable-id_input" />
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 变量-变量名 -->
      <el-table-column
        label="name"
        class="table-item variable-item-name variable-name"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="`variableList.${scope.$index}.name`"
            :rules="variableRules.name"
          >
            <el-input v-model="scope.row.name" class="table-item-content variable-name_input" />
          </el-form-item>
        </template>
      </el-table-column>

    <!-- 变量-编辑 -->
      <el-table-column
        :label="variableLabels.operator"
        class="table-item variable-item-operator variable-operator"
        width="60"
      >
        <template slot-scope="scope">
           <i class="el-icon-remove remove" @click="removeVariable(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <!-- 添加变量按钮 -->
  <el-link
    class="form-item-content"
    type="primary"
    :underline="false"
    icon="el-icon-circle-plus"
    @click.native="addVariable"
  >
   添加变量
  </el-link>
 </article>
</template>


<script>
export default {
name: 'VariableList',
props: {
  /**
   * 父组件model必须为object
   * 因为table中嵌套的form-item，所以table外层必须有el-form，el-form必须model，校验才生效
   * 且value默认传入的variableList属性，与table的绑定
   *  */
  value: { type: Object, default: () => {} }
},
data () {
  return {
    formData: {
      variableList: [] // 默认有该属性，且该属性名定义为variableList
    },
     variableRules: {
      id: [{
        required: true,
        message: `请填入变量id`,
        trigger: ['blur', 'change']
      },
      {
        type: 'number',
        message: '请输入数字'
      }],
      name: [{
        required: true,
        message: `请填入变量名`,
        trigger: ['blur', 'change']
      }]
    }
  }
},
watch: {
  value: {
    immediate: true,
    handler(newV) {
      this.formData = newV
    }
  }
},
methods: {
  // 添加变量
  addVariable() {
    const newVariable = {
      id: '',
      name: ''
    }
    this.pushVariable(this.formData.variableList, newVariable)
  },

  // 移除变量
  removeVariable(id) {
    this.spliceVariable(this.formData.variableList, id)
  },
// 公共方法 - 添加变量
  pushVariable(list, obj) {
    list.push(obj)
  },

  // 公共方法 - 移除变量
  spliceVariable(list, id) {
    list.splice(id, 1)
  }
}
}
</script>
